<template><!-- 添加帖子 -->
    <el-card style="max-width: 100%; margin: 25px 20px 35px 20px;padding-top: 20px;" shadow="always">
        <el-form ref="addPostForm" :model="post" :rules="rules" label-width="50px">
            <el-form-item style="max-width: 350px" label="标题" prop="title">
                <el-input class="" v-model="post.title" auto-complete="off" placeholder="标题">
                    <template #prefix>
                        <el-icon>
                            <CreditCard />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item style="max-width: 100%" label="内容" prop="content">
                <editor v-model="post.content" :min-height="192" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="commit">{{ isLoading ? "load..." : '提交' }}</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import useUserStore from '@/store/modules/user';
import { addPost } from '@/api/forum/post';
import { ElMessage } from 'element-plus';

export default {
    data() {
        return {
            post: {
                userId: useUserStore().id,
                title: '',
                content: ''
            },
            rules: {
                title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
                content: [{ required: true, message: "帖子内容不能为空", trigger: "blur" }]
            },
            isLoading: false
        }
    },
    methods: {
        commit() {
            this.$refs.addPostForm.validate(valid => {
                if (valid) {
                    this.isLoading = true;
                    console.log(this.post)
                    addPost(this.post).then(res => {
                        if (res.code == 200) {
                            ElMessage({
                                showClose: true,
                                message: '帖子发布成功。',
                                type: 'success',
                            })
                            this.post.title = '';
                            this.post.content = undefined;
                        }else if(res.code == 555){
                            ElMessage({
                                showClose: true,
                                message: res.msg,
                                type: 'error',
                            })
                        }
                        this.isLoading = false;
                    })
                }
            });
            
        }
    }
}

</script>

<style></style>